<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align:left;
      line-height: 200px;
    }
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="width: 1600px;margin: 0 auto"><div >

      <h3 style="margin: 0">星级宠屋管理系统</h3>
    </div ></el-header>
  <el-container style="width: 1600px;margin: 0 auto">
    <el-aside width="200px">
      <div style="width: 200px;height: 100%;">
        <el-menu  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
        >
          <el-menu-item index="1" >
              <i class="el-icon-house"></i>
              <span>首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item index="2-1">部门列表</el-menu-item>
            <el-menu-item index="2-2">添加部门</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-fold"></i>
              <span>宠物管理</span>
            </template>
            <el-menu-item index="3-1">宠物信息管理</el-menu-item>
            <el-menu-item index="3-2">宠物销售管理</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-chicken"></i>
              <span>宠物食品管理</span>
            </template>
            <el-menu-item index="4-1">食品信息管理</el-menu-item>
            <el-menu-item index="4-2">食品进货管理</el-menu-item>
            <el-menu-item index="4-3">食品出货管理</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-present"></i>
              <span>饰品物品管理</span>
            </template>
            <el-menu-item index="5-1">进货管理</el-menu-item>
            <el-menu-item index="5-2">出货管理</el-menu-item>
            <el-menu-item index="5-3">饰品使用管理</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-stopwatch"></i>
              <span>挂失信息管理</span>
            </template>
            <el-menu-item index="6-1">部门列表</el-menu-item>
            <el-menu-item index="6-2">添加部门</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>管理员管理</span>
            </template>
            <el-menu-item index="7-1">部门列表</el-menu-item>
            <el-menu-item index="7-2">添加部门</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <el-main>
      main
    </el-main>
  </el-container>
  </el-container>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
   methods:{

   }
  })
</script>
</html>